<template>
  <view class="name-valid">
    <!-- 导航栏 -->
    <nav-bar></nav-bar>
    <!-- 主要内容区 -->
    <view class="content">
      <view class="welcome-section">
        <text class="welcome-title">欢迎进行实名认证</text>
        <text class="welcome-desc">本过程需要您本人亲自完成，仅需要一分钟</text>
        <text class="welcome-hint">请您准备好身份证</text>
      </view>

      <!-- 图标区域 -->
      <view class="icon-area">
        <image class="id-card-icon" src="/static/images/id-card-icon.png" mode="aspectFit"></image>
        <text class="privacy-tip">您提交的资料将仅用于实名认证审核</text>
      </view>

      <!-- 验证按钮 -->
      <view class="verify-section">
        <button class="verify-btn" @tap="startVerify">立即验证</button>
        <view class="privacy-agreement">
          <text>点击按钮表示您已阅读并同意</text>
          <text class="link" @tap="showPrivacyPolicy">《用户隐私协议》</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'
export default {
	components: {
		NavBar
	},
  data() {
    return {
      hasAgreed: false
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    startVerify() {
      // 跳转到下一步（如上传身份证页面）
      uni.navigateTo({
        url: '/pages/face-valid/face-valid'
      })
    },
    showPrivacyPolicy() {
      // 显示隐私政策
      uni.navigateTo({
        url: '/pages/common/privacy-policy'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.name-valid {
  min-height: 100vh;
  background: #FFFFFF;
  position: relative;

  .nav-header {
    display: flex;
    align-items: center;
    padding: 20rpx 30rpx;
    border-bottom: 1rpx solid #EEEEEE;
    
    .left-icon {
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40rpx;
      color: #333;
    }

    .title {
      flex: 1;
      text-align: center;
      font-size: 36rpx;
      font-weight: 500;
      color: #333;
      margin-right: 60rpx; // 为了保持标题居中
    }
  }

  .content {
    padding: 60rpx 40rpx;

    .welcome-section {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 80rpx;

      .welcome-title {
        font-size: 40rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 30rpx;
      }

      .welcome-desc {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
      }

      .welcome-hint {
        font-size: 28rpx;
        color: #666;
      }
    }

    .icon-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 100rpx;

      .id-card-icon {
        width: 400rpx;
        height: 400rpx;
        margin-bottom: 40rpx;
      }

      .privacy-tip {
        font-size: 26rpx;
        color: #999;
      }
    }

    .verify-section {
      padding: 0 40rpx;

      .verify-btn {
        width: 100%;
        height: 88rpx;
        background: #2B87FF;
        color: #FFFFFF;
        font-size: 32rpx;
        border-radius: 44rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 30rpx;
      }

      .privacy-agreement {
        text-align: center;
        font-size: 24rpx;
        color: #999;

        .link {
          color: #2B87FF;
          display: inline;
        }
      }
    }
  }
}
</style> 